﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />


<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>

</head>

<body class="ihg-theme-draft">

  <%@ include file="/WEB-INF/include/header.jsp"%>
  <%@ include file="/WEB-INF/include/submenu.jsp"%>

  <div class="container-fluid ihg-container has-ihg-sidemenu">

    <div class="ihg-breadcrumb">
      <ol class="breadcrumb border-breadcrumb">
        <li class="active">Session &nbsp;&nbsp;-&nbsp;&nbsp;Summary&nbsp;View</li>
      </ol>
      <div class="pull-right">
        <a href="${ctx.host}/session-settings" style="color: #155CB2;">&nbsp;<<&nbsp;Back To List</a>
      </div>
    </div>

    <div class="ihg-content-layout has-operation">

      <c:if test="${not empty errorMessage}">
        <div class="alert alert-danger">
          <i class="glyphicon glyphicon-remove"></i>&nbsp;&nbsp; ${errorMessage}
        </div>
      </c:if>

      <div class="row">
        <div class="col-xs-12" id="basic-info">
          <div class="row form-horizontal ihg-form">
            <div class="ihg-form-title clearfix" style="margin: 0 15px 15px 15px;">
              <h5>Session Basic Info</h5>
              <div class="pull-right">
                <a href="${ctx.host}/session-settings/${session.id}/re-upload" data-target="#upload" data-toggle="modal" style="color: #D88362;">RE-UPLOAD</a>&nbsp;&nbsp; 
                <a href="${ctx.host}/session-settings/${session.id}/edit" data-target="#edit" data-toggle="modal" style="color: #D88362;">EDIT</a>
              </div>
            </div>
            
            <div class="form-group ihg-form-group">
              <label class="control-label col-xs-2" style="width: 20%;">Session Name：</label>
              <div class="col-xs-3">
                <p class="form-control-static">${session.name}</p>
              </div>
            </div>
            <div class="form-group ihg-form-group">
              <label class="control-label col-xs-2" style="width: 20%;">During Time：</label>
              <div class="col-xs-3">
                <p class="form-control-static">
                  <fmt:formatDate value="${session.startDate}" pattern="yyyy/MM/dd" />&nbsp;~&nbsp;<fmt:formatDate value="${session.endDate}" pattern="yyyy/MM/dd" />
                </p>
              </div>
              <label class="control-label col-xs-2" style="width: 20%;">Assessor/Delegate：</label>
              <div class="col-xs-4">
                <p class="form-control-static">${session.assessorCount}&nbsp;/&nbsp;${session.delegateCount}</p>
              </div>
            </div>
            <div class="form-group ihg-form-group">
              <label class="control-label col-xs-9" style="width: 20%;">Assessor Owner：</label>
              <div class="col-xs-3">
                <p class="form-control-static">${session.assessorOwner.name}</p>
              </div>
              <label class="control-label col-xs-9" style="width: 20%;">Delegate Owner：</label>
              <div class="col-xs-4">
                <p class="form-control-static">${session.delegateOwner.name}</p>
              </div>
            </div>
            <div class="form-group ihg-form-group">
              <label class="control-label col-xs-2" style="width: 20%;">Description：</label>
              <div class="col-xs-8">
                <p class="form-control-static">${session.description}</p>
              </div>
            </div>
            <div class="form-group ihg-form-group">
              <label class="control-label col-xs-9" style="width: 20%;">Assessor Wechat Group：</label>
              <div class="col-xs-3">
                <img alt="" src="${session.assessorWechatGroup}" style="display: block; width: 150px; height: 150px; border: 1px solid #ccc;">
              </div>
              <label class="control-label col-xs-9" style="width: 20%;">Delegate Wechat Group：</label>
              <div class="col-xs-4">
                <img alt="" src="${session.delegateWechatGroup}" style="display: block; width: 150px; height: 150px; border: 1px solid #ccc;">
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-xs-12">
          <div class="ihg-form-title clearfix" style="margin: 0 0px 15px 0px;">
            
            <h5>Facilitator Name List</h5>
            
            <div class="pull-right">
              <a href="${ctx.host}/session-settings/${session.id}/facilitators/create" data-target="#facilitator-create" data-toggle="modal" style="color: #D88362;">Add</a>
            </div>
            
          </div>
          <table class="table table-striped ihg-table tab-pane">
            <thead>
              <tr>
                <th>NAME</th>
                <th>EMAIL ADDRESS</th>
                <th>MOBILE</th>
                <th>CREATE TIME</th>
                <th>OPT</th>
              </tr>
            </thead>
            <tbody>
              <c:forEach var="facilitator" items="${facilitators}">
                <tr>
                  <td>${facilitator.name}</td>
                  <td>${facilitator.email}</td>
                  <td>${facilitator.mobile}</td>
                  <td><fmt:formatDate value="${facilitator.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                  <td>
                    <a href="${ctx.host}/session-settings/${session.id}/facilitators/${facilitator.id}/delete" data-target="#facilitator-delete" data-toggle="modal" style="color: #D88362;">DELETE</a>
                  </td>
                </tr>
              </c:forEach>
            </tbody>
          </table>
        </div>
        
        <div class="col-xs-12">
          <div class="ihg-form-title clearfix" style="margin: 0 0px 15px 0px;">
            <h5>Assessor Name List</h5>
          </div>
          <table class="table table-striped ihg-table tab-pane">
            <thead>
              <tr>
                <th>NAME</th>
                <th>EMAIL ADDRESS</th>
                <th>TELEPHONE</th>
                <th>MOBILE</th>
                <th>HOTEL NAME</th>
                <th>SUB-REGION</th>
                <th>TITLE</th>
                <th>LAST UPDATE TIME</th>
              </tr>
            </thead>
            <tbody>
              <c:forEach var="assessor" items="${assessors}">
                <tr>
                  <td>${assessor.name}</td>
                  <td>${assessor.email}</td>
                  <td>${assessor.telephone}</td>
                  <td>${assessor.mobile}</td>
                  <td>${assessor.hotelName}</td>
                  <td>${assessor.subregion}</td>
                  <td>${assessor.title}</td>
                  <td><fmt:formatDate value="${assessor.lastModifyTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                </tr>
              </c:forEach>
            </tbody>
          </table>
        </div>
        
        <div class="col-xs-12">
          <div class="ihg-form-title clearfix" style="margin: 0 0px 15px 0px;">
            <h5>Delegate Name List</h5>
          </div>
          <table class="table table-striped ihg-table tab-pane">
            <thead>
              <tr>
                <th>AVATAR</th>
                <th>NAME</th>
                <th>EMAIL</th>
                <th>TELEPHONE</th>
                <th>HOTEL</th>
                <th>SUB-REGION</th>
                <th>JOB TITLE</th>
                <th>REPORT TO</th>
              </tr>
            </thead>
            <tbody>
              <c:forEach var="delegate" items="${delegates}">
                <tr>
                  <td><img height="50" width="50" src="${config.cloudPath}/${delegate.avatar}"></td>
                  <td>${delegate.name}</td>
                  <td>${delegate.email}</td>
                  <td>${delegate.telephone}</td>
                  <td>${delegate.hotelName}</td>
                  <td>${delegate.subregion}</td>
                  <td>${delegate.jobTitle}</td>
                  <td>${delegate.reportTo}</td>
                </tr>
              </c:forEach>
            </tbody>
          </table>
        </div>
      </div>

    </div>
  </div>

  <%@ include file="/WEB-INF/include/footer.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource root="${ctx.resource}/build" type="script" src="js/page/settings/session/session-settings-view.js" />
  <script type="text/javascript">
    require([ 'page/settings/session/session-settings-view' ], function (page) {
      page.init();
    })
  </script>
  
</body>
</html>